<template>
  <div class="right_middle">
    <div
      class="visual_box"
      :style="[{ width: chartWidth }, { height: chartHeight }]"
    >
      <div class="visual_title">
        皮带秤
      </div>
      <div class="visual_main">
        <div class="visual_item">
          <div
            class="circle color-yellow border-yellow"
            :style="[{ width: itemStyle }, { height: itemStyle }]"
          >
            {{ config.classsum | format }}
          </div>
          <div class="circle_txt color-yellow">当前班产</div>
        </div>
        <div class="visual_item">
          <div
            class="circle color-green border-green"
            :style="[{ width: itemStyle }, { height: itemStyle }]"
          >
            {{ config.daysum | format }}
          </div>
          <div class="circle_txt color-green">当日产量</div>
        </div>
        <div class="visual_item">
          <div
            class="circle color-blue border-blue"
            :style="[{ width: itemStyle }, { height: itemStyle }]"
          >
            {{ config.allsum | format }}
          </div>
          <div class="circle_txt color-blue">总产量</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    chartHeight: {
      type: [Number, String],
      default: "",
    },
    chartWidth: {
      type: [Number, String],
      default: "",
    },
    config: {
      type: Object,
      default: {},
    },
  },
  computed: {
    itemStyle() {
      return parseInt(this.chartWidth) * 0.27 + "px";
    },
  },
  filters: {
    format(oldVal) {
      return parseInt(oldVal);
    },
  },
  data() {
    return {};
  },
};
</script>
<style>
.visual_main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}
.circle {
  margin: 16px auto;
  border: 3px solid red;
  text-align: center;
  line-height: 72px;
  font-size: 20px;
  border-radius: 100%;
}
.circle_txt {
  font-size: 14px;
}
.visual_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.color-yellow {
  color: #ffd220 !important;
}
.color-green {
  color: #32ffc7 !important;
}
.color-blue {
  color: #1eb6fe !important;
}
.border-yellow {
  border-color: #ffd220 !important;
}
.border-green {
  border-color: #32ffc7 !important;
}
.border-blue {
  border-color: #1eb6fe !important;
}
</style>
